<template>
  <div class="background">
    <el-form
        class="loginContainer"
    >
      <h3 class="loginTitle">高校住宿系统登录</h3>
      <el-form-item prop="account">
        <el-input
            placeholder="请输入用户名"
            v-model="loginForm.username"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
        >
        </el-input>
      </el-form-item>
      <el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>
<script>
import {login} from '../../api/api'
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitLogin () {
      console.log(this.loginForm)

      if (this.loginForm.password !== '' && this.loginForm.account !== '') {
        console.log(this.loginForm)
        login(this.loginForm).then(res => {
          if (!res.status) {
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            })
          } else {
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            localStorage.setItem('user', JSON.stringify(res.data))
            if (this.loginForm.username[0] === 'a') {
              this.$router.push({path: '/super_admin'})
            } else if (this.loginForm.username[0] === 's') {
              this.$router.push({path: '/student'})
            } else if (this.loginForm.username[0] === 't') {
              this.$router.push({path: '/teacher'})
            } else if (this.loginForm.username[0] === 'd') {
              this.$router.push({path: '/dormitory_admin'})
            } else if (this.loginForm.username[0] === 'k') {
              this.$router.push({path: '/keeper'})
            } else if (this.loginForm.username[0] === 'l') {
              this.$router.push({path: '/leader'})
            }
          }
          this.loginForm.password = ''
          this.loginForm.username = ''
        })
      }
    }
  }
}
</script>
<style>
.background {
  position: absolute;
  background-image: url("../../assets/images/bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}
.loginContainer {
  width: 300px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);;
}
</style>
